<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <style>
    header {
      text-align: center;
      font-size: 24px;
      font-weight: 600;
    }
    li {
      margin: 20px;
    }
  </style>
  <ul>
    <li>
      <header>vue 双向绑定的原理是什么</header>
      <ul>
        <li>Vue的双向绑定是指当视图（View）中的数据发生变化时，数据模型（Model）中的数据也会相应地发生变化</li>
        <li>
          一般来说可以使用v-model来实现双向绑定，它是v-bind和v-on的语法糖
        </li>
        <li>
          v-bind实现了data到Ui的单向绑定
        </li>
        <li>
          v-on实现UI到data的单向绑定，一起就是双向绑定
        </li>
        <li>
          这两个单向绑定实现，前者通过 Object.defineProperty API 给 data 创建 getter 和 setter，用于监听 data 的改变，data 一变就会安排改变 UI
        </li>
        <li>
          后者通过 template compiler 给 DOM 添加事件监听，DOM input 的值变了就会去修改 data。
        </li>
      </ul>
    </li>
    <li>
      <header>vue 是怎么解析template的?</header>
      <li>
        Vue在编译过程中会将template模板编译成一个渲染函数（render function），渲染函数会返回一个虚拟DOM（Virtual DOM）对象，最终通过虚拟DOM的Diff算法更新真实的DOM。
      </li>
    </li>
    <li>
      <header>vue 的keep-alive的作用是什么？怎么实现的</header>
      <li>
        Vue中的'keep-alive'是一个内置组件，它的作用是用来缓存已经被渲染的组件实例，以避免重复渲染和销毁组件，从而提高应用的性能。
      </li>
      <li>
        在组件切换的时候，根据组件的状态 activated和deactivated 来决定是缓存组件或者读取组件
      </li>
      <li>
        'keep-alive'组件的实现原理是通过'component'组件的动态组件特性来实现的。
      </li>
      <li>
        当'keep-alive'包裹的组件被激活（activated）时，Vue会将该组件的实例存储到缓存中；当该组件被重新激活时，Vue会从缓存中读取该组件的实例并将其重新渲染到页面中。
      </li>
      <li>
        它有两个生命周期钩子分别是activated和deactivated
      </li>
    </li>
    <li>
      <header>Vue3新特性？</header>
      <li>
        Vue3引入了 Composition API,与Vue 2 的 Options API 相比，Composition API 更加灵活和组合性，使得代码可重用性更高，组件逻辑更加清晰易懂。
      </li>
      <li>
        使用 Proxy 对象来替代 Object.defineProperty，使得 Vue 的响应式系统更加高效、稳定、灵活。
      </li>
      <li>
        引入了 Teleport 组件，它可以将一个组件的内容传送到 DOM 树中的任何位置
      </li>
      <li>
        支持多个根节点
      </li>
      <li>
        Vue2里面的destroyed生命周期，改为unmounted
      </li>
    </li>
  </ul>
</body>
</html>